<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简历</title>
    <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./CSS/main.css">
    <script src="//at.alicdn.com/t/font_1658830_0tpyip87fyjd.js"></script>
  </head>
  <body>
      <div class="site-welcome active" id="siteWelcome">
        <div class="loading"></div>
      </div>
      <div class="topNavBar" id="topNavBar">
        <div class="topNavBar-inner clearFix">
          <a href="&" class="logo" alt="logo"><span class="logo-rs">RS</span><span class="logo-card">card</span></a>
          <nav class="menu">
              <ul class="clearFix">
                  <li><a href="#siteAbout">关于</a></li>
                  <li><a href="#siteSkills">技能</a></li>
                  <li class="menuTigger">
                    <a href="#siteWorks">作品</a>
                    <ul class="submenu">
                      <li>作品 1</li>
                      <li>作品 2</li>
                      <li>作品 3</li>
                    </ul>
                  </li>
                  <li class="menuTigger">
                    <a href="#">博客</a>
                    <ul class="submenu">
                      <li>博客 1</li>
                      <li>博客 2</li>
                      <li>博客 3</li>
                    </ul>
                  </li>
                  <li><a href="#">日历</a></li>
                  <li><a href="#">联系方式</a></li>
                  <li><a href="#">其它</a></li>
              </ul>
          </nav>
        </div>
      </div>
      <div class="banner">
        <div class="mask"></div>
      </div>
      <main>
        <div class="userCard" id="siteAbout" data-x>
          <div class="pictureAndText clearFix">
            <div class="picture">
                <img src="./image/avatar.jpg" width="299" height="347" alt="头像">
            </div>
            <div class="text">
              <span class="welcome">HELLO</span>
              <h1>XX辉</h1>
              <h2>前端工程师</h2>
              <hr>
              <dl>
                <dt>年龄</dt>
                <dd>18</dd>
                <dt>所在城市</dt>
                <dd>XX</dd>
                <dt>邮箱</dt>
                <dd>huiboxes@gmail.com</dd>
                <dt>手机</dt>
                <dd>XXXXX</dd>
              </dl>
            </div>
          </div>
          <footer class="media">
            <a href="#">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weibo"></use>
              </svg>
            </a>
            <a href="#">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-git"></use>
              </svg>
            </a>
            <a href="#">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-zhihu1"></use>
              </svg>
            </a>
            <a href="#">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-tuite2"></use>
              </svg>
            </a>
            <a href="#">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jianshu"></use>
              </svg>
            </a>
          </footer>
        </div>
        <p class="download-wrapper">
          <a href="./image/rs-cover.jpg" class="download" target="_blank">下载  PDF  简历</a>
        </p>
        <p class="selfIntroduction">
            谢少辉，初级前端工程师<br>
            技能： 前端开发、Node.js开发
        </p>
      </main>
      <section class="skills" id="siteSkills" data-x>
        <h2>技能</h2>
        <ol class="clearFix">
          <li>
            <h3>HTML 5 &amp; CSS3</h3>
            <div class="progressBar">
              <div class="progress"></div>
            </div>
          </li>
          <li>
            <h3>JavaScript</h3>
            <div class="progressBar">
              <div class="progress"></div>
            </div>
          </li>
          <li>
            <h3>jQuery</h3>
            <div class="progressBar">
              <div class="progress"></div>
            </div>
          </li>
          <li>
            <h3>Vue</h3>
            <div class="progressBar">
              <div class="progress"></div>
            </div>
          </li>
          <li>
            <h3>React</h3>
            <div class="progressBar">
              <div class="progress"></div>
            </div>
          </li>
          <li>
            <h3>HTTP</h3>
            <div class="progressBar">
              <div class="progress"></div>
            </div>
          </li>
        </ol>
      </section>
      <section class="portfolio" id="siteWorks" data-x>
        <h2>作品集</h2>
        <!-- Slider main container -->
        <div id="mySlides">
          <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
                <!-- Slides -->
                <img src="./image/slides/slide-1.jpg" class="swiper-slide">
                <img src="./image/slides/slide-2.jpg" class="swiper-slide">
                <img src="./image/slides/slide-3.jpg" class="swiper-slide">
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>
          </div>
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </section>
      <section class="message">
        <h2>留言</h2>
        <ol id="messageList">
        </ol>
        <form action="" id="postMassageForm" class="postMassageForm">
          <label for="" class="msgName">姓名
            <input type="text" name="name">
          </label>
          <label for="" class="msgContent">内容
          <input type="text" name="content">
          </label>
          <input type="submit" value="提交" class="msgBtn">
        </form>
      </section>
      <script src="./js/base/View.js"></script>
      <script src="./js/base/controller.js"></script>
      <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script>
      <script src="./js/init-swiper.js"></script>
      <script src="./js/auto-slide-up.js"></script>
      <script src="./js/sticky-topbar.js"></script>
      <script src="./js/smoothly-navigation.js"></script>
      <script src="./dist/Bmob-2.2.2.min.js"></script>
      <script src="./js/message.js"></script>
  </body>
</html>
